<template>
    <div class="multi-container">
        <a-button v-if="Import" class="export" :size="size" @click="handleImport">{{ t('yl.Import') }} </a-button>
        <a-button v-if="hideAdd" type="primary" :size="size" @click="handleNew"
            >{{ t('yl.new') }}
            <template #icon>
                <PlusOutlined />
            </template>
        </a-button>
        <a-button v-if="showEdit" class="modify" :disabled="disabled" :size="size" @click="handleModify"
            >{{ t('yl.modify') }}
            <template #icon>
                <EditOutlined />
            </template>
        </a-button>
        <a-button v-if="hideDelete" type="danger" @click="showDeleteConfirm" :disabled="disabled" :size="size"
            >{{ t('yl.delete') }}
            <template #icon>
                <DeleteOutlined />
            </template>
        </a-button>
        <a-button v-if="hideExport" class="export" :size="size" @click="handleExport"
            >{{ t('yl.export') }}
            <template #icon>
                <ExportOutlined />
            </template>
        </a-button>
        <a-button v-if="hideRefresh" class="export" :size="size" @click="handleRefresh"
            >{{ t('yl.Refresh') }}
            <template #icon>
                <UndoOutlined />
            </template>
        </a-button>
    </div>
</template>

<script lang="ts">
import { createVNode, defineComponent } from 'vue';
import { useI18n } from 'vue-i18n';
import { PlusOutlined, DeleteOutlined, ExportOutlined, ExclamationCircleOutlined, UndoOutlined } from '@ant-design/icons-vue';
import { Modal, message } from 'ant-design-vue';
/**
 * 后期要加上权限
 */
export default defineComponent({
    name: 'multiButton',
    props: {
        size: {
            type: String,
            default: () => 'default',
        },
        disabled: {
            type: Boolean,
            default: () => false,
        },
        showEdit: {
            type: Boolean,
            default: () => false,
        },
        hideDelete: {
            type: Boolean,
            default: () => false,
        },
        hideAdd: {
            type: Boolean,
            default: () => false,
        },
        hideExport: {
            type: Boolean,
            default: () => false,
        },
        hideRefresh: {
            type: Boolean,
            default: () => false,
        },
        selectedRowKeys: {
            type: Array,
            default: () => [],
        },
        Import: { type: Boolean, default: () => false },
    },
    components: {
        PlusOutlined,
        DeleteOutlined,
        ExportOutlined,
        ExclamationCircleOutlined,
        UndoOutlined,
    },
    setup(props, { emit }) {
        const { t } = useI18n();
        // 新增
        const handleNew = () => {
            emit('add');
        };
        // 批量修改
        const handleModify = () => {
            emit('multiEdit');
        };
        // 批量删除
        const handleDelete = () => {
            emit('multiDelete');
        };
        // 批量刷新
        const handleRefresh = () => {
            emit('Refresh');
        };
        // 批量删除确认弹窗
        const showDeleteConfirm = () => {
            if (!props.selectedRowKeys.length) {
                return message.warning(t('yl.emptyDeleteConfirm'));
            }
            Modal.confirm({
                title: t('yl.deleteConfirmtext'),
                icon: createVNode(ExclamationCircleOutlined),
                content: t('yl.deleteConfirmDescription'),
                okType: 'danger',
                onOk() {
                    handleDelete();
                },
            });
        };
        // 导出
        const handleExport = () => {
            emit('export');
        };
        // 批量导入
        const handleImport = () => {
            emit('handleImport');
        };
        return { t, handleNew, handleModify, handleDelete, handleExport, showDeleteConfirm, handleRefresh, handleImport };
    },
});
</script>
<style lang="scss" scoped>
.multi-container {
    @include flex;
    padding-bottom: 20px;
    .ant-btn {
        height: auto;
        margin-right: 10px;
        padding: $width2 $width10;
        font-size: 12px;
    }
    .modify {
        color: $white;
        background-color: $green;
        border-color: $green;
    }
    .export {
        color: $white;
        background-color: $yellow;
        border-color: $yellow;
    }
}
</style>
